<template>
  <d-scroll-view  @refresherrefresh="getDetail" :refresher-triggered="triggered">
    <proj-detail-layout :process-instance-id="processInstanceId" :project-number="projectNumber">
    <d-forms label-width="230rpx">
      <d-forms-item label="申请人" :input="form.applicantName"></d-forms-item>
      <d-forms-item label="最终用户" :input="form.useUnitName"></d-forms-item>
      <d-forms-item label="正式合同审批" :type="DFormInputType.DICT" :dict-type="PM_DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :input="form.virtualContractResult"></d-forms-item>
      <d-forms-item label="虚拟合同审批" :type="DFormInputType.DICT" :dict-type="PM_DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :input="form.contractResult"></d-forms-item>
      <view>
        <view class="form-title-1">申请理由</view>
        <d-card>
          <d-forms-item disabled :input="form.applyReason"></d-forms-item>
        </d-card>
      </view>
      <view>
        <view class="form-title-1">采购清单附件</view>
        <d-card>
          <pm-file-upload readonly :files="form.itemAttach"></pm-file-upload>
        </d-card>
      </view>
      <view>
        <view class="form-title-1">比价结果综述</view>
        <d-card>
          <d-forms-item disabled :input="form.comparisonResult"></d-forms-item>
        </d-card>
      </view>
      <view>
        <view class="form-title-1">供应商选项</view>
        <view
          v-for="(item, idx) in form.comparisons"
          :key="`price-supplier_`+idx"
          :class="[
            'mb20 price-supplier-box',
            {['is-check']: item.checked}
          ]"
        >
          <view>
            <view class="mb10">
              <tab-title>
                <template #suffix>
                  <iconfont name="icon-ERP_gongyingshang"></iconfont>
                </template>
                <text>{{ item.supplier }}</text>
              </tab-title>
            </view>
            <view class="mb10">
              <tab-title>
                <template #suffix>
                  <iconfont name="icon-renminbi"></iconfont>
                </template>
                <view>总价：<text class="tab-title-value">{{ formatRMB(item.amount) }}</text></view>
              </tab-title>
            </view>
            <d-card>
              <view class="form-title-2">说明</view>
              <text>{{ item.introduction }}</text>
              <view class="form-title-2">附件</view>
              <pm-file-upload readonly :files="item.attach"></pm-file-upload>
              <view class="form-title-2">备注</view>
              <d-forms-item disabled :input="item.checkRemarks"></d-forms-item>
            </d-card>
            <view v-for="(contract, idx) in item.contracts" class="purchase-contract-box" :key="`purchase-contract_${idx}`">
              <view class="form-title-1">{{ contract.contractName }}</view>
              <d-card>
                <view>
                  <view class="form-title-2">附件</view>
                  <pm-file-upload readonly :files="contract.contractAttach"></pm-file-upload>
                </view>
                <view>
                  <view class="form-title-2">备注</view>
                  <d-forms-item disabled :input="contract.remarks"></d-forms-item>
                </view>
              </d-card>
            </view>
          </view>
        </view>
      </view>
    </d-forms>
  </proj-detail-layout>
  </d-scroll-view>
</template>

<script setup lang="ts">
import ProjDetailLayout from "@/components/ProjDetailLayout/index.vue";
import {usePccApplyApi} from "@/api/pm/project/pccApply";
import {DFormInputType} from "@/utils/enum";
import {PM_DICT_TYPE} from "@/utils/pmDict";
import {formatRMB} from "@/utils";
import TabTitle from "@/components/TabTitle/index.vue";

defineOptions({ name: 'ContractDraftApply'})

const initForm = {
  id: null,
  projectNumber: null,
  virtualContractResult: null,
  contractResult: null,
  applicant: null,
  applicantName: null,
  applyReason: null,
  applyStatus: null,
  itemAttach: null,
  comparisonResult: null,
  processInstanceId: null,
  storaged: null,
  result: null,
  comparisons: null,
  projectName: null,
  salesManager: null,
  salesManagerName: null,
  useUnit: null,
  useUnitName: null,
}
const form = ref<PriceComparisonForm>(initForm)
const triggered = ref<boolean>(false);
function getDetail() {
  if (processInstanceId.value) {
    triggered.value = true
    usePccApplyApi().getPccApplyByProcess(processInstanceId.value).then(res => {
      if (res.code === 0) {
        form.value = res.data || initForm
      }
    }).finally(() => {
      triggered.value = false
    })
  }
}

const projectNumber = ref<string>(null);
const processInstanceId = ref<string>(null);
onLoad((query) => {
  projectNumber.value = query['project_number']
  processInstanceId.value = query['process_instance_id']
  getDetail();
})
</script>

<style scoped lang="scss">
.price-supplier-box {
  border-radius: 16rpx;
  border: 2rpx dashed var(--primary-color);
  padding: 20rpx;
  position: relative;
  box-sizing: border-box;
}

.purchase-contract-box {
  border-radius: 16rpx;
  //border: 2rpx dashed #000;
  border: 2rpx dashed #000;
  padding: 20rpx;
  box-sizing: border-box;
  margin-top: 20rpx;
}


.tab-title-value {
  font-family: DIN-Alternate;
  font-size: 40rpx;
  font-weight: 700;
}
</style>
